Vue.filter('improve',function(value){
    return "￥" + value.toFixed(2)
})

let app = new Vue({
    el:'#app',
    data:{
        books:[
            {
                id:1,
                name:"《算法导论》",
                date:"2006-9",
                price:85,
                count:1
            },
            {
                id:2,
                name:"《UNIX编写艺术》",
                date:"2006-2",
                price:59,
                count:1
            },
            {
                id:3,
                name:"《编程珠玑》",
                date:"2008-10",
                price:39,
                count:1
            },
            {
                id:4,
                name:"《代码大全》",
                date:"2006-3",
                price:128,
                count:1
            }
        ]
    },
    methods:{
        increase(index){
            this.books[index].count++
        },
        decrease(index){
            this.books[index].count--
        },
        remove(index){
            this.books.splice(index,1)
        },
        showPrice(price){
            return "￥" + price.toFixed(2)
        }
    },
    computed:{
        totalPrice(){
            // let totalPrice = 0
            // for(const book of this.books){
            //     totalPrice += book.price * book.count
            // }
            // return totalPrice
            return this.books.reduce(function(preValue,n){
                return preValue + n.price * n.count
            },0)
        }
    },
    filters:{
        improvePrice:function(value){ // 键值对
            return "￥" + value.toFixed(2)
        }
    }
})

//js的三种高级函数：
//命令式编程：使用js原生开发或jQuery操作DOM来完成数据的更改
//生命式编程：通过VUe，react  angualr，底层框架编辑好了，我们需要声明一下就能完成DOM操作


//编程范式
//面向对象与面向过程
//面向过程 操作的是函数

const nums = [10,222,56,888,67,88,999]
//1.filter  函数的使用
let numNums = nums.filter(function(n){
//参数为回调函数，每次回调这个函数，比如数组长度
// filter函数回调函数必须返回布尔值，返回true，加入到新数组，否则会过滤
return n < 100
})

console.log(numNums);

//2.map函数的使用
// 对数组中的每个由内容进行操作
let newNewNums = numNums.map(function(n){
        return n *2
})
console.log(newNewNums);
// 3.reduce函数，第一个参数为回调函数，第二个参数默认的初始值
// reduce的作用对数组所有内容进行汇总
// 参数一：匿名回调函数
// 参数二：默认初始值一般填0
let list = newNewNums.reduce(function(preValue,n){
        // preValue指代上一次返回的值
        // n是本次传递进来的值
        return preValue + n;
},0)

// 第一次preValue的值是默认的初始值0， n 是第一个值
// 第二个preValue的值是 上一次return返回来的值，n是第二个值
console.log(list);

let totals = nums.filter(n => n < 100).map(n => n * 2).reduce((preValue, n) => preValue + n, 0)
console.log(totals);